<template>
  <div>
    <header class="header">
        <a class="header-title" href="/">ListPal</a>
        <a href="#" class="add-button" :class="{'is-exit': showNewItem}" @click.prevent="showNewItem = !showNewItem"></a>
    </header>
    <div class="list-items">
        <checklist-item v-for="item in checklistItems" :key="item.id" :item="item" @checked="handleItemChecked" @deleted="handleItemDeleted"></checklist-item>
        <new-item v-if="showNewItem" @saved="handleSaveNewItem" @closed="handleCloseNewItem" :disabled="disableButtons"></new-item>
    </div>
    </div>
</template>
<script>
    import ChecklistItem from './ChecklistItem';
    export default {
        props: ['hash'],
        data() {
            return {
                showNewItem: false,
                disableButtons: false,
                checklistItems: []
            }
        },
        components: {
            'checklist-item': ChecklistItem
        },
        mounted() {
            this.getListData();
        },
        methods: {
            getListData() {
                axios.get('/api/' + this.hash, {
                })
                    .then(response => {
                        this.checklistItems = response.data.items;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            handleSaveNewItem(newItem) {
                this.disableButtons = true;
                axios.post('/api/' + hash + '/create', {
                    item: newItem
                })
                    .then((response) => {
                        this.disableButtons = false;
                        this.getListData();
                    })
                    .catch((error) => {
                        console.error(error);
                        this.disableButtons = false;
                    });
            },
            handleCloseNewItem(newItem) {
                this.disableButtons = true;
                axios.post('/api/' + hash + '/create', {
                    item: newItem
                })
                    .then((response) => {
                        this.disableButtons = false;
                        this.showNewItem = false;
                        this.getListData();
                    })
                    .catch((error) => {
                        console.error(error);
                        this.disableButtons = false;
                    });
            },
            handleItemChecked(itemId) {
                let itemIndex = this.checklistItems.findIndex(item => item.id === itemId);
                let item = this.checklistItems[itemIndex];

                axios.post('/api/' + this.hash + '/' + item.id, {
                    is_complete: item.is_complete ? 0 : 1
                })
                    .then((response) => {
                        this.getListData();
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            },
            handleItemDeleted(itemId) {
                let itemIndex = this.checklistItems.findIndex(item => item.id === itemId);
                let item = this.checklistItems[itemIndex];

                this.checklistItems.splice(itemIndex, 1);
                axios.delete('/api/' + this.hash + '/' + item.id, {})
                    .then((response) => {
                        this.getListData();
                    })
                    .catch((error) => {
                        console.error(error);
                    })
            }
        },
        computed: {
            showNewItem() {
                return this.$parent.showNewItem;
            }
        }
    }
</script>